<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-27 17:45:14
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-27 18:09:49
 * @Description: demo07 Form 表单
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class MyForm extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            name: "",
            content: "这是textarea的初试内容。",
            fruit: "",
            multiple: ["a", "b"],
          };

          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
        }
        handleChange(event) {
          // this.setState({ name: event.target.value });
          event.persist();
          const target = event.target;
          const value =
            target.name === "isGoing" ? target.checked : target.value;
          // 获取name
          const name = target.name;

          this.setState({
            [name]: value,
          });
        }

        handleSubmit(event) {
          console.log("提交的东西: ", this.state);
          event.preventDefault();
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                名字:
                <input
                  name="name"
                  type="text"
                  value={this.state.name}
                  onChange={this.handleChange}
                />
              </label>
              <br />
              <label>
                文章:
                <textarea
                  name="content"
                  value={this.state.content}
                  onChange={this.handleChange}
                />
              </label>
              <br />
              <label>
                选择你喜欢的风味:
                <select
                  name="fruit"
                  value={this.state.fruit}
                  onChange={this.handleChange}
                >
                  <option value="">--请选择--</option>
                  <option value="grapefruit">葡萄柚</option>
                  <option value="lime">酸橙</option>
                  <option value="coconut">椰子</option>
                  <option value="mango">芒果</option>
                </select>
              </label>
              <br />
              <label>
                多选:
                <select
                  name="multiple"
                  multiple={true}
                  value={this.state.multiple}
                  onChange={this.handleChange}
                >
                  <option value="a">A</option>
                  <option value="b">B</option>
                  <option value="c">C</option>
                  <option value="d">D</option>
                </select>
              </label>
              <br />
              <input type="submit" value="提交" />
            </form>
          );
        }
      }
      ReactDOM.render(<MyForm />, document.getElementById("root"));
    </script>
  </body>
</html>
